<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Treasure Hunt Game</title>
   <link rel="stylesheet" href="style.css">
</head>
<style>#game-container {
   width: 600px;
   height: 400px;
   border: 1px solid black;
   position: relative;
}

#player, #treasure {
   width: 50px;
   height: 50px;
   background-color: red;
   position: absolute;
}

#player {
   left: 0;
   top: 0;
}

#treasure {
   right: 0;
   bottom: 0;
}</style>
<body>
   <div id="game-container">
      <div id="treasure"></div>
      <div id="player"></div>
   </div>
   

   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   <script src="script.js"></script>
   
   <script>
	   
	   var playerPosition = {x: 0, y: 0};
	   var treasurePosition = {x: 0, y: 0};
	   var gameEnded = false;
	   function randomPosition() {
	      var pos = {x: 0, y: 0};
	      pos.x = Math.floor(Math.random() * ($('#game-container').width() - 50));
	      pos.y = Math.floor(Math.random() * ($('#game-container').height() - 50));
	      return pos;
	   }
	   
	   function distance(a, b) {
	      var dx = a.x - b.x;
	      var dy = a.y - b.y;
	      var dist = Math.sqrt(dx*dx + dy*dy);
	      return dist;
	   }$(document).ready(function() {
   // Initialize player and treasure positions
   playerPosition = {x: 0, y: 0};
   treasurePosition = randomPosition();

   // Initialize player and treasure elements
   $('#player').css(playerPosition);
   $('#treasure').css(treasurePosition);

   // Add event listener for key presses
   $(document).on('keydown', function(e) {
      if (gameEnded) return;

      var step = 10;
      var direction = {x: 0, y: 0};
      switch(e.keyCode) {
         case 37: // left
            direction.x = -1;
            break;
         case 38: // up
            direction.y = -1;
            break;
         case 39: // right
            direction.x = 1;
            break;
         case 40: // down
            direction.y = 1;
            break;
      }

      // Move player
      playerPosition.x += step * direction.x;
      playerPosition.y += step * direction.y;
      $('#player').css(playerPosition);

      // Check for treasure
      var dist = distance(playerPosition, treasurePosition);
      if (dist <= 50) {
         alert('You found the treasure!');
         gameEnded = true;
      }
   });
});
	   
	   
	   
	   
	   
	   
	   
	   
	   
	   
	   
	   
	   
	   
	   
   </script>
</body>
</html>